<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习1：主题系统实现</title>
    <style>
        /* 在这里实现你的主题系统 */
        :root {
            /* 定义基础变量 */
        }

        /* 实现暗色主题 */
        [data-theme="dark"] {
            /* 定义暗色主题变量 */
        }

        /* 实现高对比度主题 */
        [data-theme="high-contrast"] {
            /* 定义高对比度主题变量 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>练习1：实现主题系统</h1>
        
        <div class="theme-switcher">
            <!-- 添加主题切换按钮 -->
        </div>

        <main>
            <!-- 添加测试主题的UI组件 -->
            <section class="card">
                <!-- 添加卡片内容 -->
            </section>

            <section class="form">
                <!-- 添加表单元素 -->
            </section>

            <section class="buttons">
                <!-- 添加按钮组 -->
            </section>
        </main>
    </div>

    <script>
        // 实现主题切换逻辑
    </script>
</body>
</html>

<!-- 
练习要求：
1. 实现一个完整的主题系统，包括：
   - 明亮主题（默认）
   - 暗色主题
   - 高对比度主题
   
2. 主题系统应该包含以下变量：
   - 主色调
   - 文字颜色
   - 背景颜色
   - 边框颜色
   - 阴影效果
   - 强调色
   - 错误/成功/警告色

3. 创建以下组件来测试主题：
   - 卡片组件
   - 按钮组（主要、次要、危险按钮）
   - 表单元素（输入框、复选框、单选框）
   - 提示信息（成功、错误、警告）

4. 实现主题切换功能：
   - 添加主题切换按钮
   - 使用 localStorage 保存用户的主题偏好
   - 在页面加载时恢复用户的主题设置

5. 额外挑战：
   - 添加主题切换过渡动画
   - 实现自动主题（根据系统设置）
   - 添加自定义主题功能
-->
